import colorTools from '@/utils/colorTools'
import { bottom } from '@antv/x6/lib/registry/port-layout/line'
import * as echarts from 'echarts'
/**
 * @description:加载环形图公共方法
 * @param {*} title
 * @param {*} data
 * @param {*} refDom
 */
function initCircularEcharts(title, data, refDom) {
    const option = {
        // title: {
        //     text: title,
        //     left: 'left'
        //     // textStyle: {
        //     //     color: 'red' // 设置标题文字的颜色
        //     // }
        // },
        grid: {
            left: 50,
            right: 50,
            top: 30,
            bottom: 30
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            textStyle: {
                color: '#fff' // 设置图例文字颜色
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: true, // 显示标签
                    position: 'outside', // 标签位置在外侧
                    formatter: '{b}: {c} ({d}%)', // 标签显示格式
                    fontSize: 12,
                    color: '#fff'
                },
                data: data
            }
        ]
    }
    option && refDom.setOption(option)
}
/**
 * @description:加载柱状图公共方法
 * @param {*} title
 * @param {*} data
 * @param {*} refDom
 * @param {*} tooltip
 */
function initBarEcharts(title, data, refDom, tooltip) {
    const color = colorTools().initColor(data.name.length)
    const option = {
        // title: {
        //     text: title,
        //     left: 'left'
        // },
        tooltip: tooltip,
        grid: {
            left: 50,
            right: 50,
            top: 30,
            bottom: 30
        },
        xAxis: {
            type: 'category',
            data: data.name,
            axisLabel: {
                color: '#fff', // 设置 X 轴标签颜色
                fontSize: 12, // 设置字体大小
                fontWeight: 'bold' // 设置字体粗细
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: data.value,
                type: 'bar',
                label: {
                    show: true, // 显示柱子上的标签
                    position: 'inside', // 标签位置，'top' 表示在柱子上方
                    formatter: '{c}', // 格式化标签内容，这里直接显示数值
                    color: '#fff', // 标签文字颜色
                    fontSize: 14 // 标签文字大小
                },
                itemStyle: {
                    // 给每个柱子设置颜色
                    color: (params) => {
                        return new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1, // 渐变方向（从上到下）
                            [
                                {
                                    offset: 0,
                                    color: color[
                                        params.dataIndex % color.length
                                    ]
                                }, // 起始颜色
                                { offset: 1, color: '#ccc' } // 结束颜色（可以选择透明色或者其他颜色）
                            ]
                        )
                    }
                }
            }
        ]
    }
    option && refDom.setOption(option)
}
/**
 * @description:加载饼图公共方法
 * @param {*} title
 * @param {*} data
 * @param {*} refDom
 */
function initPieEcharts(title, data, refDom) {
    const option = {
        // title: {
        //     text: title,
        //     left: 'left'
        // },
        tooltip: {
            trigger: 'item'
        },
        grid: {
            left: 50,
            right: 50,
            top: 30,
            bottom: 30
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                type: 'pie',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: true, // 显示标签
                    position: 'outside', // 标签位置在外侧
                    formatter: '{b}: {c} ({d}%)', // 标签显示格式
                    fontSize: 12,
                    color: '#fff'
                },
                // labelLine: {
                //     show: true, // 显示标签线
                //     length: 20, // 标签线的长度
                //     length2: 10, // 第二段标签线的长度（如果有）
                //     lineStyle: {
                //         color: '#000', // 标签线的颜色
                //         width: 2, // 标签线的宽度
                //         type: 'solid' // 标签线的样式
                //     },
                //     formatter: '{b}: {c} ({d}%)' // 设置标签线末端显示的文本
                // },
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                }
            }
        ]
    }
    option && refDom.setOption(option)
}
/**
 * @description:加载饼图公共方法
 * @param {*} title
 * @param {*} data
 * @param {*} refDom
 */
function initLineEcharts(title, data, refDom, tooltip) {
    const option = {
        // title: {
        //     text: title,
        //     left: 'left'
        // },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: 50,
            right: 50,
            top: 30,
            bottom: 30
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20
        },
        xAxis: {
            type: 'category',
            data: data.name,
            axisLabel: {
                color: '#fff'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff'
            },
            minInterval: 1 // 设置最小刻度间隔为1，确保刻度值为整数
        },
        series: [
            {
                data: data.value,
                type: 'line',
                smooth: true
            }
        ]
    }
    option && refDom.setOption(option)
}
/*
 * @Description: 加载树图公共方法
 * @param {Object} data 树图数据
 * @param {Object} refDom echarts实例
 * @param {Function} nodeClickCallback 节点点击回调函数
 */
function initTreeEcharts(data, refDom, callback) {
    const option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                data: data,
                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',
                symbolSize: 10,
                symbol: 'roundRect', // 将节点形状改为矩形
                symbolSize: [10, 10], // 设置矩形大小
                symbolRotate: 45, // 旋转45度变成斜角
                selectedMode: false, // 禁用默认的选中效果
                expandAndCollapse: false, // 禁用默认的展开/收起功能
                label: {
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 12
                },
                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                animationDuration: 550,
                animationDurationUpdate: 750,
                roam: true // 启用平移和缩放
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                zoomOnMouseWheel: true, // 启用鼠标滚轮缩放
                moveOnMouseMove: true, // 启用鼠标拖动
                moveOnMouseWheel: true // 启用鼠标滚轮平移
            }
        ]
    }

    // 设置选项
    refDom && refDom.setOption(option)

    // 绑定节点点击事件
    refDom.on('click', function (params) {
        if (
            params.componentType === 'series' &&
            params.seriesType === 'tree' &&
            typeof callback === 'function'
        ) {
            callback(params.data)
        }
    })
}
/**
 * @Description: 加载仪表盘图表公共方法
 * @param {String} title 图表标题
 * @param {Number} value 当前值
 * @param {Number} max 最大值
 * @param {Object} refDom echarts实例
 */
function initGaugeEcharts(title, value, refDom) {
    const option = {
        backgroundColor: '#1b1b1b',
        tooltip: {
            formatter: '{a} <br/>{c} {b}'
        },
        title: {
            text: title,
            left: 'center',
            bottom: 10,
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 'bold'
            }
        },
        series: [
            {
                name: '速度',
                type: 'gauge',
                min: 0,
                max: 100,
                splitNumber: 10,
                radius: '90%',
                axisLine: {
                    // 坐标轴线
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            [0.09, 'lime'],
                            [0.82, '#1e90ff'],
                            [1, '#ff4500']
                        ],
                        width: 3,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {
                    // 坐标轴小标记
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                },
                axisTick: {
                    // 坐标轴小标记
                    length: 15, // 属性length控制线长
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                splitLine: {
                    // 分隔线
                    length: 25, // 属性length控制线长
                    lineStyle: {
                        // 属性lineStyle（详见lineStyle）控制线条样式
                        width: 3,
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {
                    // 分隔线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                title: {
                    textStyle: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail: {
                    // backgroundColor: 'rgba(30,144,255,0.8)',
                    // borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor: '#fff', //默认透明
                    // shadowColor: '#1b1b1b',
                    shadowBlur: 5,
                    offsetCenter: [0, '50%'], // x, y，单位px
                    textStyle: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data: [
                    {
                        value: value,
                        name: '%'
                    }
                ]
            }
        ]
    }
    // const option = {
    //     title: {
    //         text: title,
    //         left: 'center',
    //         bottom: 10,
    //         textStyle: {
    //             color: '#333',
    //             fontSize: 16,
    //             fontWeight: 'bold'
    //         }
    //     },
    //     tooltip: {
    //         formatter: '{a} <br/>{b} : {c}%'
    //     },
    //     series: [
    //         {
    //             name: title,
    //             type: 'gauge',
    //             radius: '100%', // 调整仪表盘半径
    //             min: 0,
    //             max: 100,
    //             startAngle: 225, // 起始角度
    //             endAngle: -45, // 结束角度
    //             progress: {
    //                 show: true,
    //                 width: 10,
    //                 itemStyle: {
    //                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    //                         { offset: 0, color: '#1e3a8a' }, // 深蓝色渐变起始
    //                         { offset: 1, color: '#3b82f6' } // 深蓝色渐变结束
    //                     ])
    //                 }
    //             },
    //             axisLine: {
    //                 lineStyle: {
    //                     width: 10,
    //                     color: [
    //                         [0.1, '#22c55e'], // 绿色
    //                         [0.6, '#3b82f6'], // 蓝色
    //                         [1, '#ef4444'] // 红色
    //                     ]
    //                 }
    //             },
    //             axisTick: {
    //                 length: 10,
    //                 splitNumber: 10, // 增加刻度数量
    //                 lineStyle: {
    //                     color: '#666',
    //                     width: 2
    //                 }
    //             },
    //             splitLine: {
    //                 length: 15,
    //                 lineStyle: {
    //                     width: 3,
    //                     color: '#666'
    //                 }
    //             },
    //             axisLabel: {
    //                 distance: 10, // 增加刻度与圆盘的间距
    //                 color: '#fff',
    //                 fontSize: 12
    //             },
    //             detail: {
    //                 width: '60%',
    //                 height: 20,
    //                 fontSize: 16,
    //                 color: '#46bee9', // 白色文字
    //                 fontWeight: 'bolder',
    //                 formatter: '{value}%',
    //                 offsetCenter: [0, '50%']
    //             },
    //             pointer: {
    //                 show: true,
    //                 length: '70%',
    //                 width: 6,
    //                 itemStyle: {
    //                     color: '#ef4444' // 红色指针
    //                 }
    //             },
    //             data: [
    //                 {
    //                     value: value,
    //                     title: {
    //                         offsetCenter: [0, '-30%'],
    //                         color: '#666',
    //                         fontSize: 14
    //                     }
    //                 }
    //             ]
    //         }
    //     ]
    // }

    // 设置选项
    refDom && refDom.setOption(option)
}
/**
 * @description: 初始化echarts
 * @param {*} title
 * @param {*} type
 * @param {*} data
 * @param {*} echartsRef
 */
function initeEchartsBasic(title, type, data, echartsRef) {
    let tooltip
    let color
    const echartsType = type || 1
    switch (echartsType) {
        case 1:
            color = colorTools().initColor(data.length)
            data.forEach((item, index) => {
                item.itemStyle = { color: color[index] }
            })
            initPieEcharts(title, data, echartsRef)
            break
        case 2:
            tooltip = {
                trigger: 'axis',
                formatter: '{b}: {c}',
                axisPointer: {
                    type: 'shadow'
                }
            }
            initBarEcharts(title, data, echartsRef, tooltip)
            break
        case 3:
            color = colorTools().initColor(data.length)
            data.forEach((item, index) => {
                item.itemStyle = { color: color[index] }
            })
            initCircularEcharts(title, data, echartsRef)
            break
        case 4:
            tooltip = {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{c}'
            }
            initLineEcharts(title, data, echartsRef, tooltip)
            break
    }
}
export default function echartsTools() {
    return {
        initPieEcharts,
        initBarEcharts,
        initCircularEcharts,
        initLineEcharts,
        initTreeEcharts,
        initGaugeEcharts,
        initeEchartsBasic
    }
}
